<template>
  <div class="mod-config">
    <el-form :inline="true">
      <el-form-item>
        <date-phase ref="datePhase" dateTypeRange="1" :datePhase="datePhase" ></date-phase>
      </el-form-item>
      <el-form-item>
        <el-form-item label="请选择组员" prop="leader">
          <el-select v-model="dingId" placeholder="全部团队成员" style="width:150px;" clearable>
            <el-option-group
              v-for="group in getPermUser()"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getReport()" :loading="dataListLoading">查询</el-button>
        <el-button v-if="(!editMode) && (getCanEdit())" @click="edit()">编辑</el-button>
        <el-button v-if="editMode && (getCanEdit())" :loading="saveLoading" @click="save()">保存</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
      <el-table :data="reportItems" id="sale-table" style="width: 100%;">
          <el-table-column
            fixed
            prop="datePhase"
            label="日期"
            min-width="120">
          </el-table-column>
          <el-table-column
            fixed
            prop="dingName"
            label="业务员"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户名称"
            min-width="100">
            <template slot-scope="scope">
              <el-input v-if="editMode" v-model="scope.row.customerName" />
              <span v-if="!editMode">{{scope.row.customerName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="country"
            label="国家"
            min-width="100">
            <template slot-scope="scope">
              <el-select v-if="editMode" v-model="scope.row.country">
                <el-option
                      v-for="item in getCountryOption()"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name">
                </el-option>
              </el-select>
              <span v-if="!editMode">{{scope.row.country}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="contactType"
            label="沟通方式"
            min-width="80">
            <template slot-scope="scope">
              <el-select v-if="editMode" v-model="scope.row.contactType">
                <el-option
                      v-for="item in contactOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                </el-option>
              </el-select>
              <span v-if="!editMode">{{scope.row.contactType}}</span>
            </template>
          </el-table-column>
        <el-table-column
          align="center"
          label="客户沟通情况">
          <el-table-column
            prop="contactNum"
            label="沟通次数"
            width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.contactNum" />
              <span v-if="!editMode">{{scope.row.contactNum}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="priceFeeling"
            label="客户觉得价格"
            min-width="80">
            <template slot-scope="scope">
              <el-select v-if="editMode" v-model="scope.row.priceFeeling">
                <el-option
                      v-for="item in priceOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                </el-option>
              </el-select>
              <span v-if="!editMode">{{scope.row.priceFeeling}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dateFeeling"
            label="客户觉得交期"
            min-width="80">
            <template slot-scope="scope">
              <el-select v-if="editMode" v-model="scope.row.dateFeeling">
                <el-option
                      v-for="item in dateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                </el-option>
              </el-select>
              <span v-if="!editMode">{{scope.row.dateFeeling}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productRequire"
            label="产品是否满足客户需求，如不能请说明"
            min-width="100">
            <template slot-scope="scope">
              <el-input v-if="editMode" v-model="scope.row.productRequire" />
              <span v-if="!editMode">{{scope.row.productRequire}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="otherRequire"
            label="客户其他需求"
            min-width="100">
            <template slot-scope="scope">
              <el-input v-if="editMode" v-model="scope.row.otherRequire" />
              <span v-if="!editMode">{{scope.row.otherRequire}}</span>
            </template>
          </el-table-column>
        </el-table-column>
          <el-table-column
            prop="canDeal"
            label="是否成交"
            min-width="80">
            <template slot-scope="scope">
              <el-select v-if="editMode" v-model="scope.row.canDeal">
                <el-option
                      v-for="item in yesNoOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                </el-option>
              </el-select>
              <span v-if="!editMode">{{scope.row.canDeal}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dealDate"
            label="成交日期"
            min-width="140">
            <template slot-scope="scope">
              <el-date-picker v-if="editMode"
                  v-model="scope.row.dealDate" style="width:140px"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              <span v-if="!editMode">{{scope.row.dealDate}}</span>
            </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script>
  import DatePhase from  '@/components/sale/date-phase'
  import {listCountry} from '@/utils/common'
  import dingMixin from  '@/mixins/ding'
  import {dateUtil} from '@/utils/dateUtil'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    data () {
      return {
        datePhase:{
            dateType: 1,
            value:'',
            to:''
        },
        dingId:'',
        editMode: false,
        dataListLoading: false,
        saveLoading:false,
        reportItems:[],
        b2bPlats: [],
        users: [
          {
          label: '梦之队',
          options: []
        },
          {
          label: '福来队',
          options: []
        }],
        country:'',
        priceOptions:[
          {
          value: '非常高',
          label: '非常高'
          },{
          value: '偏高',
          label: '偏高'
          },{
          value: '一般',
          label: '一般'
          },{
          value: '便宜',
          label: '便宜'
          },{
          value: '没提价格',
          label: '没提价格'
          }
        ],
        dateOptions:[
          {
          value: '太长',
          label: '太长'
          },{
          value: '一般',
          label: '一般'
          },{
          value: '很快',
          label: '很快'
          },{
          value: '没提交期',
          label: '没提交期'
          }
        ],
        contactOptions:[
          {
          value: '邮件',
          label: '邮件'
          },{
          value: '社媒',
          label: '社媒'
          },{
          value: '电话',
          label: '电话'
          },{
          value: '面聊',
          label: '面聊'
          }
        ],
        yesNoOptions:[
          {
          value: '是',
          label: '是'
          },{
          value: '否',
          label: '否'
          }
        ]
      }
    },
    mixins: [dingMixin],
    components: {
      DatePhase
    },
    activated () {
      
    },
    created(){
      this.getTeamMember()
      this.getB2bPlats()
    },
    methods: {
      exportExcel(){
        this.$nextTick(function () {
          let wb = XLSX.utils.table_to_book(document.getElementById('sale-table'));
          let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
          try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'b2b.xlsx')
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          return wbout;
        });
      },
      getPermUser(){
        if(this.isSaleLeader){
          return this.users;
        }
        //this.userInfo.dingId = '095004684935546754'
        for(let team of this.users){
          for(let u of team.options){
            if(this.userInfo.dingId == u.value){
              for(let leader of this.b2bPlats){
                if(leader.remark == this.userInfo.dingId){
                  return [team]
                }
              }
              return [
                {
                  label: team.label,
                  options: [u]
                }
              ]
            }
          }
        }
      },
      getB2bPlats(){
        this.$http({
              url: this.$http.adornUrl('/sale/listB2bPlat'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.b2bPlats = data.data
              } else {
                this.b2bPlats = []
              }
        })
      },
      save(){
        this.saveLoading = true;
        let res = this.checkInputData()
        this.$http({
          url: this.$http.adornUrl('/sale/customer/saveNewCustomerTrace'),
          method: 'post',
          data: this.$http.adornData([res],false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.getReport()
          } else {
            this.$message({message: data.msg, type: 'error', duration: 3000})
          }
        }).finally(()=>{
          this.saveLoading = false
          this.editMode=false
        })
      },
      checkInputData(){
        let res = this.reportItems[0]
        return res
      },
      edit(){
        this.editMode=true;
      },
      getCanEdit(){
        if(this.userInfo.dingId != this.dingId && !this.isSaleLeader){
          return false
        }

        if(this.reportItems.length>0 && this.dingId!=''){
          if(dateUtil.nDayExpire(30, this.reportItems[0].createAt) && !this.isSaleLeader) {
            return false;
          }

          return this.reportItems[0].datePhase.length==10
        }
        return false
      },
      getTeamMember(){
        this.$http({
          url: this.$http.adornUrl('/sale/getB2bMember'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            for(let member of data.dreamTeam){
              this.users[0].options.push({
                label:member.realName,
                value:member.dingId
              });
            }
            for(let member of data.fuLaiTeam){
              this.users[1].options.push({
                label:member.realName,
                value:member.dingId
              });
            }
          }
        })
      },
      getCountryOption(){
        return listCountry()
      },
      // 获取数据列表
      getReport () {
        if(this.datePhase.value == null || this.datePhase.value == ''){
          this.$message({message: '请选择时间', type: 'error', duration: 3000})
          return
        }
        this.editMode = false
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sale/customer/listNewCustomerTrace'),
          method: 'get',
          params: this.$http.adornParams({
            'datePhase': this.datePhase.value,
            'dateType': this.datePhase.dateType,
            'to': this.datePhase.to,
            'dingId': this.dingId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.reportItems = data.data
          } else {
            this.reportItems = []
          }
        }).finally(()=>{
          this.dataListLoading = false
        })
      }
    }
  }
</script>
<style lang="scss">

  .el-table{
    font-size: 12px;
  }

  .edit-cell{
    width: 60px;
  }

  .el-input-number.is-without-controls .el-input__inner{
    padding: 0;
    text-align: left;
  }

</style>
